<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>指令练习</title>
		
		<style>
			/* 为属性设置隐藏 */
			[v-cloak] {
				display: none;
			}
		</style>
		
	</head>
	<body>
		
		<div id="app">
			<!-- 1.指令练习 v-cloak
				当浏览器解析JS完成前，用户看到的数据是{{msg}},
				直到浏览器加载完成全部JS，则{{msg}}替换为具体的数据
				需求：不想让用户看到没有解析的数据，使用v-cloak属性
			-->
			测试：v-cloak属性
			<h1 v-cloak>{{msg}}</h1>
			<hr>
			<!-- 2.v-text，将上述v-cloak优化了 -->
			测试：v-text属性
			<h1 v-text="msg"></h1>
			<hr>
			<!-- 3.v-html,动态展现html标签,让浏览器解析html之后再展现 -->
			测试:html指令
			<span v-html="html"></span>
			<hr>
			<!-- 4.需求：只想展现{{msg}}不需要vue解析
					语法：v-pre vue直接跳过该标签不解析-->
			测试：v-pre指令<br>
			<span v-pre>{{msg}}</span>
			<hr>
			<!-- 5.需求：元素只解析1次 -->
			v-once:数据只解析一次<br>
			<span v-once>{{one}}</span>
			
			
			
			
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
		<script>
			//const关键字,该关键字用来标识常量
			//一般工作中字符串写法，提倡使用单引号
			const app = new Vue({
				//el：表示vue对哪个元素有效
				el:"#app",
				data:{
					msg:'测试数据',
					html:'<h3>测试html语法</h3>',
					one:'数据解析1次'
				}
				
			})
		</script>
		
	
	</body>
</html>
